<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    模糊搜索: <input type="text" id="mysearch">
    <script>
        let osearch = document.querySelector("#mysearch")
        //原始方式this指向window，需要用个临时变量来改变指向
        osearch.oninput = function () {
            let _this = this
            setTimeout(function () {
                console.log(_this.value)
                console.log(`发送${_this.value}到后端，获取列表数据`)
            }, 1000)
        }

        //而箭头函数就没这个问题，谁调用就指向谁，箭头函数没有this，this指向父作用域
        osearch.oninput = function () {
            setTimeout(() => {
                console.log(this.value)
                console.log(`发送${this.value}到后端，获取列表数据`)
            }, 1000)
        }
    </script>
</body>

</html>